<template>
    <div class="shichangjiandu">
        <!-- 类型汇总 -->
        <div class="summary type-summary">
            <div class="title flex">
                <div class="title-icon">
                    <img src="@/assets/images/shichangjiandu/data-icon.png">
                    <span>类型汇总</span>
                </div>
                <div class="title-bg">
                    <img src="@/assets/images/shichangjiandu/data-bg.png">
                </div>
            </div>
            <div class="summary-content">
                <checked-title fixed="end">
                    <template #right>
                        <div class="title2 pointer" :class="active == item.value ? 'active' : ''"
                            @click="tabChange(item.value)" v-for="(item, index) in tabList" :key="index">
                            {{ item.title }}
                        </div>
                    </template>
                </checked-title>
                <div class="ranking">
                    <div class="ranking_list">
                        <ul v-for="(item, index) in dataList" :key="'a' + index">
                            <li :style="{ color: index < 3 ? '#FFC300' : '#FF6C1D' }">      
                                <div class="ranking_img1" v-if="index ==0"></div>
                                <div class="ranking_img2" v-else-if="index ==1"></div>
                                <div class="ranking_img3" v-else-if="index ==2"></div>
                                <div class="ranking_img" v-else>
                                    {{ index + 1 }}
                                </div>
                            </li>
                            <li>
                                <div class="ranking_name">
                                    {{ item.name }} 
                                </div>
                                <div class="progress">
                                    <div class="percentage" :style="{width: item.num/summary*100+'%'}"></div>
                                </div>
                            </li>
                            <li>{{ item.num }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { MarketSurveillanceDB } from '@/api'

export default {
    data() {
        return {
            active: '1',
            tabList: [
                { title: '月', value: '1' },
                { title: '年', value: '2' },
				{ title: '全部', value: '0' },
            ],

            dataList: [],
            summary: 0
        }
    },
    mounted() {
        this.getRankingList()
    },
    methods: {
        tabChange(active) {
            this.active = active
            this.getRankingList('tabChange')
        },
        getRankingList() {
            this.summary = 0;
            MarketSurveillanceDB.getTypeNum({
                orgId:'1301571732182839297',
                type: this.active,
            }).then((res) => {
                this.dataList = res.data 
                res.data.map((item)=>{
                    this.summary+=item.num
                })
            })
        },
    },
}
</script>

<style lang="less" scoped>
.shichangjiandu {
    .summary {

        .title {
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
            position: relative;
            height: 42px;

            ::after {
                content: '';
                height: 1px;
                width: 7px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: #fff;
            }

            .title-icon {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 18px;
                font-weight: bold;
                color: #FFFFFF;

                img {
                    width: 42px;
                    height: 42px;
                }

                span {
                    display: inline-block;
                    height: 42px;
                    line-height: 42px;
                }
            }

            .title-bg {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                img {
                    width: 227px;
                    height: 10px;
                }

            }

            >div {
                width: 50%;
            }

        }

        .summary-content {
            .ranking {
                width: 100%;
                height: 100%;
                margin-top: 10px;

                .ranking_title {
                    width: 100%;
                    height: 50px;
                    background: #173271;
                    display: flex;

                    li {
                        font-size: 17px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #46ede8;
                        text-align: center;
                        line-height: 50px;
                    }

                    li:nth-child(1) {
                        flex: 2;
                    }

                    li:nth-child(2) {
                        flex: 5;
                    }

                    li:nth-child(3) {
                        flex: 3;
                    }
                }

                .ranking_list {
                    max-height: 400px;
                    overflow: auto;

                    ul {
                        display: flex;
                        height: 50px;
                        align-items: center;


                        li {
                            font-size: 14px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #cfcfcf;
                            line-height: 41px;
                            text-align: center;
                            line-height: 50px;
                        }

                        li:nth-child(1) {
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            .ranking_img {
                                width: 26px;
                                height: 26px;
                                border-radius: 50%;
                                border: 2px solid #D0D6D7;
                                text-align: center;
                                line-height: 24px;
                                font-size: 14px;
                                font-family: OPPOSans;
                                font-weight: bold;
                                color: #F0F6F6;
                            }
                            .ranking_img1 {
                                width: 26px;
                                height: 24px;
                                background: url('~@/assets/images/shichangjiandu/one.png') no-repeat;
                                background-size: 100% 100%;
                            }
                            .ranking_img2 {
                                width: 26px;
                                height: 24px;
                                background: url('~@/assets/images/shichangjiandu/two.png') no-repeat;
                                background-size: 100% 100%;
                            }
                            .ranking_img3 {
                                width: 26px;
                                height: 24px;
                                background: url('~@/assets/images/shichangjiandu/three.png') no-repeat;
                                background-size: 100% 100%;
                            }
                        }

                        li:nth-child(2) {
                            flex: 7;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 16px;
                            font-family: Source Han Sans SC;
                            font-weight: 400;
                            color: #C9D9DB;
                            .ranking_name {
                                flex: 3;
                                line-height: 20px;
                            }
                            .progress {
                                flex: 7;
                                width: 100%;
                                height: 5px;
                                background: #DCFBFF33;
                            }
                            .percentage {
                                height: 5px;
                                background: #24DCF7;
                            }
                        }

                        li:nth-child(3) {
                            flex: 1;
                        }

                        // li:nth-child(2) {
                        // }
                        // li:nth-child(2) {
                        //   color: #CFCFCF;
                        //   line-height: 41px;
                        // }
                    }
                }
            }
        }
    }
}</style>